<template>
  <div class="flex justify-center items-center" style="height: 100vh">
    <div class="row base-card-shadow" style="width: 40vw; min-width: 100px">
      <div class="col flex justify-center items-center">
        <q-card
          square
          style="min-width: 100px; height: 100%; width: 60%"
          class="no-shadow"
        >
          <q-card-section align="center">
            <h3 class="text-uppercase">登录</h3>
            <!-- 用户名 -->
            <q-input
              class="logon-input"
              clearable
              standout="bg-cyan text-white"
              bottom-slots
              v-model="login.UserName"
              label="账号"
            >
              <template v-slot:prepend>
                <q-icon name="account_circle" />
              </template>
            </q-input>
            <!-- 密码 -->
            <q-input
              class="logon-input"
              standout="bg-cyan text-white"
              bottom-slots
              v-model="login.Password"
              label="密码"
              :type="isPwd ? 'password' : 'text'"
              hint=""
            >
              <template v-slot:prepend>
                <q-icon name="vpn_key" />
              </template>
              <template v-slot:append>
                <q-icon
                  :name="isPwd ? 'visibility_off' : 'visibility'"
                  class="cursor-pointer"
                  @click="isPwd = !isPwd"
                />
              </template>
            </q-input>

            <!-- 登录按钮 -->
            <q-btn
              :loading="loading"
              class="logon-btn bg-logon-card-input"
              text-color="white"
              unelevated
              label=""
              style="font-size: large"
              @click="logon"
              >登 录 系 统
            </q-btn>
          </q-card-section>
        </q-card>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive,Ref } from "vue";
import { LoginRequest, LoginClient, ResponseDataOfEmploy } from "../services/api";
import { useRouter, useRoute } from "vue-router";
export default defineComponent({
  name: "Login",
  data() {
    return {
      isPwd: true,
    };
  },
  setup() {
    
    const login = reactive<LoginRequest>({});
    const loading = ref<boolean>(false);
    const router = useRouter();
    const logon = async () => {        
        loading.value = true;
        const loginClient = new LoginClient()
        loginClient.do(login).then((response: ResponseDataOfEmploy)=>{
            console.log(response.Data)
            loading.value = false;
        }) 
        // formRef.value?.validate(function(valid:boolean, obj:any){
        //     if(!valid){
        //         loading.value = false
        //         return
        //     }
            
        //     Login_Do(modelRef).then((response: ResponseData)=>{
        //     if(response.Success){
        //         setInfo(response.Data).then(()=>{
        //         router.push({name:'Home'});
        //         })
        //     }else{
        //         loading.value = false
        //     }
        //     })
        // })
    //const response: ResponseData = await Login_Do(this.form)
    }
    return { loading, login, logon };
  },
  methods: {
    // logon() {
    //   this.loading = !this.loading;
    //   if (this.username === "admin" || this.username === "test") {
    //     sessionStorage.setItem("access_token", "972784674");
    //     sessionStorage.setItem("user_role", this.username);
    //     const lt = setTimeout(() => {
    //       this.$router.push("/").then((e) => {
    //         this.$q.notify({
    //           icon: "insert_emoticon",
    //           message: "hi，cimo 欢迎回来",
    //           color: "green",
    //           position: "top",
    //           timeout: 1500,
    //         });
    //         clearTimeout(lt);
    //         this.loading = !this.loading;
    //       });
    //     }, Math.random() * 3000);
    //   } else {
    //     this.loading = !this.loading;
    //     this.$q.notify({
    //       icon: "announcement",
    //       message: "账号错误",
    //       color: "red",
    //       position: "top",
    //       timeout: 1500,
    //     });
    //   }
    // },
  },
});
</script>

<style scoped lang="scss">
.logon-btn {
  font-size: large;
  margin-top: 0px;
  margin-bottom: 20px;
  width: 100%;
}

.bg-logon-card-input {
  background: linear-gradient(to right, #36d1dc 1%, #5b86e5 99%);
  transition: all 0.3s ease-in-out;
  background-size: 200% auto;
}

.bg-logon-card-input:hover {
  background-position: right center;
  box-shadow: 0 12px 20px -11px #5b86e5;
}
</style>
